<template>
  <view class="notice-container">
    <view class="title">消息通知</view>
    <view class="notice-container__content flex u-padding-20">
      <view class="u-margin-top-20 u-margin-right-10">
        <u-image width="80rpx" height="80rpx" :src="src"></u-image>
      </view>
      <swiper
        class="notice-container__swiper flex-1 u-padding-20"
        :autoplay="true"
        :interval="2000"
        :circular="true"
        :duration="1000"
        :vertical="true"
      >
        <swiper-item v-for="(item, i) in list" :key="i">
          <view @click="goNotice()">
            <view class="u-line-1 u-m-b-10 fontBlack">
              {{ item.title }}
            </view>
            <view class="u-font-12 u-line-1">
              {{ item.content }}
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: '/static/image/home/icon_notice.png',
      list: [],
    };
  },
  mounted() {
    this.getNoticeData();
  },

  methods: {
    getNoticeData() {
      const _that = this;
      this.$zx.common_api.getNoticeList('1', '10').then((data) => {
        console.log('getNoticeList----->47', data);
        if (data.length == 0) {
          this.list.push('暂无公告');
        } else {
          this.list = data;
          // data.forEach(function(item, index, array) {
          // 	_that.list.push(item.title + "\n" + item.content);
          // });
        }
      });
    },
    goNotice() {
      this.$u.route('pages/staff-home/noticeList');
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-container {
  background-color: white;
  padding-bottom: 10rpx;

  &__content {
    margin: 20rpx 20rpx;
    border-radius: 20rpx;
    border: 1rpx solid #e5e5e5;
  }

  &__swiper {
    height: 90rpx;
    background-color: #f6f6f6;
    border-radius: 20rpx;
  }
}

.title {
  font-weight: bold;
  margin-top: 20rpx;
  background: white;
  padding: 20rpx 0 0 20rpx;
}
</style>
